<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>搜索建议-suggestion-原生js封装</title>
	<link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/>
	<link rel="icon" href="../public/image/favicon.png" type="images/png"/>
	<link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css">
	<link rel="stylesheet" type="text/css" href="../public/style/common.css">
	<style type="text/css">
		.search{
			width:400px;
			margin: 0 auto 25px;
		}
		.search .input-text{
			width: 200px;
			padding:4px 10px;
			line-height: 20px;
		}
		.search .input-submit{
			width:60px;
			height: 30px;
			line-height: 30px;
		}
		.suggestion{
			background: #fff;
		}
		.suggestion ul{
			border:1px solid #ebebeb;
		}
		.suggestion li{
			padding:0 10px;
			line-height: 24px;
		}
		.suggestion .active{
			background: #ccc;
		}
		.code {
			border: 1px dashed #e2e2e2;
			padding: 10px 5px;
			margin-bottom: 25px;
		}
	</style>
	<script type="text/javascript" src="../code/suggestion.js"></script>
</head>
<body>
	<div class="header">
        <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
        <a href="/">返回首页</a>
    </div>
    <div class="main">
		<div class="search">
			<form action="http://www.baidu.com/s" target="_blank">
				<input class="input-text" type="text" name="word" value="" placeholder="输入想要搜索的关键词"/>
				<input class="input-submit" type="submit" value="搜索">
			</form>
		</div>
		<div class="code">
			<p>百度搜索建议</p>
<pre>

</pre>
		</div>
		<script type="text/javascript">
			// $('.search input[type="text"]').suggestion({
			// 	url:'http://suggestion.baidu.com/su',
			// 	FieldName:'wd',
			// 	jsonp:'cb',
			// 	callback:function(item){
			// 		var data = item['data']['s'];
			// 		item.target.empty();
			// 		for(var i=0;i<data.length;i++){
			// 			item.target.append('<li>'+data[i]+'</li>');
			// 		}
			// 	}
			// });
			var ts=new suggestion('.search input[type="text"]');
			console.log(ts)
		</script>
		<div class="example">
			<div class="call">
				<h1>调用方法：</h1>
				<p>$(selector).suggestion(options);</p>
			</div>
			<h2>options参数</h2>
			<table>
				<thead>
					<tr>
						<th width="150">参数</th>
						<th width="80">默认值</th>
						<th>说明</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>url</td>
						<td>''</td>
						<td>请求的接口地址</td>
					</tr>
					<tr>
						<td>suggestionCls</td>
						<td>'suggestion'</td>
						<td>提示框的内容class</td>
					</tr>
					<tr>
						<td>FieldName</td>
						<td>'word'</td>
						<td>当前input表单项在请求接口时的字段名</td>
					</tr>			
					<tr>
						<td>dynamic</td>
						<td>true</td>
						<td>是否需要异步请求数据</td>
					</tr>
					<tr>
						<td>activeCls</td>
						<td>'active'</td>
						<td>列表项选中class</td>
					</tr>
					<tr>
						<td>dataFormat</td>
						<td>'jsonp'</td>
						<td>请求的格式</td>
					</tr>
					<tr>
						<td>parameter</td>
						<td>{}</td>
						<td>其他与接口有关参数</td>
					</tr>
					<tr>
						<td>jsonpCallback</td>
						<td>''</td>
						<td>自定义回调函数</td>
					</tr>
					<tr>
						<td>autoSubmit</td>
						<td>true</td>
						<td>点击确定是否自动提交表单</td>
					</tr>
					<tr>
						<td>beforeSend</td>
						<td>[无]</td>
						<td>发送前动作：传入准备提交的表单项目，返回false终止提交</td>
					</tr>
					<tr>
						<td>callback</td>
						<td>[无]</td>
						<td>获得数据后触发：传入一个对象，target表示被建议列表对象,data表示请求到的数据</td>
					</tr>
					<tr>
						<td>onChange</td>
						<td>[无]</td>
						<td>用户按键盘切换时触发</td>
					</tr>
					<tr>
						<td>onSelect</td>
						<td>[无]</td>
						<td>选中搜索建议列表项：传入一个对象，target表示当前选中列表项,input表示当前input表单项</td>
					</tr>
				</tbody>
			</table>
		</div>		
	</div>
</body>
</html>